<template>
    <div class="search-warp">
        <el-input 
            :model-value="modelValue" 
            :placeholder="placeholder" 
            :clearable="isClear" 
            @input="changeVal" 
            @keyup.enter="confirm"
            @clear="clearValue"
        />
        <img
            src="@/assets/images/search-icon.png"
            @click="confirm"
        >
    </div>
</template>

<script>
export default {
    props: {
        placeholder: {
            type: String,
            default: '输入关键字搜索'
        },
        isClear: {
            type: Boolean,
            default: false
        },
        modelValue: {
            type: String,
            default: ''
        }
    },
    emits: ['update:modelValue', 'confirmSearch', 'clearInputVal'],
    setup (props, { emit }) {
        const changeVal = (val) => {
            emit('update:modelValue', val)
        }
        const confirm = () => {
            emit('confirmSearch', props.modelValue)
        }
        const clearValue = () => {
            changeVal('')
            emit('clearInputVal')
        }
        const pdRight = props.isClear ? '50px' : '32px'
        return{
            changeVal,
            confirm,
            pdRight,
            clearValue
        }
    }
}
</script>

<style lang="scss" scoped>
.search-warp{
    position: relative;
    :deep(.el-input__inner) {
        height: 32px;
        padding-right: v-bind(pdRight);
    }
    
    :deep(.el-icon) {
        right: 22px;
    }
    img{
        @include abs-right(12px);
        @include wh(16px,16px);
        cursor: pointer;
    }
}
</style>